<template>
    <div>
        <MyTitle title="权限列表"></MyTitle>
        <el-row class="mt10">
            <el-button type="success" @click="addRoles">添加权限</el-button>
        </el-row>
        <el-row class="mt10">
            <!-- 搜索 -->
            <el-col :span="6">
                <el-input placeholder="请输入搜索关键字" v-model="sobj.keyword"></el-input>
            </el-col>
            <el-col :span="6" class="ml20">
                <el-button type="primary" @click="todoSearch">搜索</el-button>
                <el-button type="danger" @click="resetData">重置</el-button>
            </el-col>
        </el-row>
        <el-row class="mt10">
            <!-- 表格 -->
            <el-col :span="23">
                <el-table :data="rList" stripe style="width: 100%" center border :row-key="(item) => item._id">


                    <el-table-column type="selection" label="选择" width="60" align="center" />

                    <el-table-column type="index" label="序号" width="60" align="center" />

                    <el-table-column prop="label" label="权限名" width="120" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.label }}</span>
                        </template>
                    </el-table-column>


                    <el-table-column prop="value" label="权限值" width="120" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.value }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="color" label="颜色属性" width="130" align="center">
                        <template #default="scope">
                            <el-tag :color="scope.row.color"> {{ scope.row.color }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="_id" label="主键" width="220" align="center">
                        <template #default="scope">
                            <el-tag color="#f50"> {{ scope.row._id }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="auto" align="center" fixed="right">
                        <template #default="scope">
                            <el-popconfirm title="你确定要删除吗??请三思" @confirm="ToDoDelete(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button link type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small"
                                @click="updateItem(scope.row, scope.$index)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog v-model="show" title="添加权限" width="30%" :before-close="handleClose">
            <el-form ref="formRef" :model="form" status-icon :rules="rules" label-width="120px" label-position="top"
                class="myform">
                <el-form-item label="权限名" prop="label">
                    <el-input clearable v-model="form.label" type="text" placeholder="请输入权限名" autocomplete="off" />
                </el-form-item>
                <el-form-item label="权限值" prop="value">
                    <el-input v-model="form.value" type="text" placeholder="请输入权限值" autocomplete="off" />
                </el-form-item>
                <el-form-item label="颜色属性" prop="color">
                    <el-input v-model="form.color" type="color" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="success" @click="confirmAction">
                        确认添加
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <DiaLogForm ref="diaRef" title="修改权限" btn="修改" :rules="rules" @todoconfirm="todoconfirm">
            <template #default="scope">
                <el-form-item label="权限名" prop="label">
                    <el-input clearable v-model="scope.form.label" type="text" placeholder="请输入权限名"
                        autocomplete="off" />
                </el-form-item>
                <el-form-item label="权限值" prop="value">
                    <el-input v-model="scope.form.value" type="text" placeholder="请输入权限值" autocomplete="off" />
                </el-form-item>
                <el-form-item label="颜色属性" prop="color">
                    <el-input v-model="scope.form.color" type="color" />
                </el-form-item>
            </template>
        </DiaLogForm>
    </div>
</template>


<script setup lang="ts">
import { onMounted, computed, ref, reactive, watch } from 'vue';
import { useStore } from '../../store';
import { Http } from '../../api/api'
import { formRefType, RoleFace } from '../../utils/types';
import type { FormInstance, FormRules } from 'element-plus'
import { ShowError } from '../../utils/message';

const store = useStore()
const { getRoleListAsync, changeRoleList } = store;
const roleList = computed(() => store.roleList)
const diaRef = ref<any>()

const show = ref<boolean>(false)
const formRef = ref<formRefType | any>()
const form = reactive<RoleFace>({})



const sobj = reactive<any>({
    keyword: ''
})

const rList = ref<any>([])



const getRListAsync = async (payload?: RoleFace) => {
    let res = await Http.getrolelist(payload) as unknown as any;
    if (res.code == 200) {
        rList.value = res.result;
    }
}

const resetData = () => {
    sobj.keyword = '';
    getRListAsync()
}

const todoSearch = () => {
    getRListAsync(sobj)
}

const rules = reactive<FormRules>({
    label: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    value: [
        { required: true, message: '请输入', trigger: 'blur' },

    ],
    color: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],

})
const handleClose = () => {
    show.value = false;
    formRef.value.resetFields()
}

const updateItem = (item: any, index: number) => {
    console.log('123123')
    diaRef.value.show = true;
    console.log(item)
    diaRef.value.form = Object.assign({}, item)
}


const todoconfirm = async (item: any) => {
    console.log(item)
    let res = await Http.roleupdate(item) as unknown as any;
    if (res.code == 200) {
        diaRef.value.handleClose()
        getRListAsync()
        getRoleListAsync()
    }
}


const confirmAction = () => {
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            let res = await Http.roleadd(form) as unknown as any;
            if (res.code == 200) {
                handleClose()
                getRListAsync()
                getRoleListAsync()
            }
        } else {
            ShowError('请输入必要的数据')
        }
    })
}
const addRoles = () => {
    show.value = true
}


const ToDoDelete = async (item: any, index: any) => {


    let res = await Http.roledelete({
        _id: item._id
    }) as unknown as any;

    if (res.code == 200) {
        rList.value.splice(index, 1)
        getRoleListAsync()
    }
}


onMounted(() => {
    getRListAsync()
})
</script>


